<template>
	<view class="bg">
		<myhead left="1" txt="登录"></myhead>
		<view class="txt">
			登录
		</view>
		<view class="inputList">
		    <view class="title">手机号码</view>
		    <input placeholder="请输入手机号码" v-model="phone" class="radius"></input>
		</view>
		<view class="inputList">
		    <view class="title">密码</view>
		    <input placeholder="请输入密码" password v-model="pass" class="radius"></input>
		</view>
		<checkbox-group class="jz" @change="radioChange">
			<label for='checkbox1'>
				<checkbox id='checkbox1'  value="1" :checked='true' />记住密码</checkbox>
			</label>
		</checkbox-group>
		
		<view class="btn" @tap='btn'>
			登录
		</view>
		<view class="zcbtn" @tap='zcBtn'>
			注册账号
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				phone:null,
				pass:null,
				checkbox:true
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			var that=this
			if(uni.getStorageSync('login')){
				var loginIifo = uni.getStorageSync('login')
				that.phone=loginIifo[0]
				that.pass=loginIifo[1]
			}
		},
		methods: {
			radioChange:function(e){
				if(e.target.value.length){
					this.checkbox=true
				}else{
					this.checkbox=false
				}
			},
			zcBtn:function(){
				uni.navigateTo({
					url:'/pages/user/register'
				})
			},
			btn:function(){
				//console.log(this.phone+this.pass)
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
					  title: '请输入正确的手机号码',
					  icon: 'none'
					});
					return false;
				}
				if(this.pass){
					uni.showLoading({
					    title: '加载中'
					});
					http.post('/api/user/login', {username: this.phone,password:this.pass}).then(res => {
						if (res.code == 200 && res.result) {
							if(this.checkbox){
								uni.setStorageSync('login', [this.phone,this.pass]);
							}
							uni.setStorageSync('userInfo', res.result);
							uni.setStorageSync('token', res.result.token);
						}
						uni.showToast({
						  title: res.message,
						  icon: 'none',
						  duration:1000
						});
						uni.hideLoading();
						setTimeout(function () {
						    uni.switchTab({
						        url: '/pages/home/home'
						    });
						}, 1000);
					})
				}else{
					uni.showToast({
					  title: '请输入登录密码',
					  icon: 'none'
					});
				}
				//console.log(uni.getStorageSync('login'))
			}
		}
	}
</script>

<style>
	page{
		background: #F5F8FF;
	}
	.txt{
		padding: 10vw 8vw 16vw 8vw;
		font-size: 8vw;
		color: #4CD964;
	}
	.inputList{
		padding: 0 8vw;
		margin-bottom: 6vw;
	}
	.inputList .title{
		margin-bottom: 2vw;
		font-size: 3.6vw;
		color: #999999;
	}
	.inputList input{
		height: 12vw;
		line-height: 12vw;
		border-bottom: 1px solid #F2F2F2;
	}
	.jz{
		padding-left: 8vw;
		margin-bottom: 6vw;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.btn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
	}
	.zcbtn{
		text-align: center;
		margin-top: 6vw;
		font-size: 3.6vw;
		color: #999999;
	}
</style>
